<template>
  <div>
      <Card>
          <!-- :plugins="calendarPlugins" -->
          <!-- <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins"  /> -->
          <!-- <full-calendar class="fullcalendar" @dayClick="handleDateClick"  @eventClick="handleEventClick" defaultView="dayGridMonth" locale="fr" :events="fcEvents" first-day='1' weekNumberCalculation="ISO" :header="header"  :eventTimeFormat="evnetTime" /> -->
          <div class="row">
              <span style="float: left;">
                 <t-date-picker mode="date" range :placeholder="['开始时间', '结束时间']" />
              </span>
             <span style="float: right;">
                <t-button theme="primary">新增员工</t-button>
             </span>
          </div>
          <span class="namespan">
              <ul class="zonghe">
                <li class="name">员工</li>
                <li class="namespans" v-for="(item,index) in employees" :key="index">
                    <span class="thename">{{ item.name }}</span> <span>{{ item.time }}</span>
                </li>
              </ul>
          
              <ul class="zhouyi">
                <li >
                    <ul class="weektime">
                        <li v-for="(item,index) in week" :key="index" class="week">
                            <!-- <span>星期 {{ index + 1 }}</span> -->
                            <span class="timedata">{{ item.time }}</span>
                        </li>
                    </ul>
                    <!-- <span class="week">
                        
                        
                    </span>
                    <span class="week">
                        <span>星期二</span>
                        <span class="timedata">2020-3-21</span>
                    </span>
                    <span class="week">
                        <span>星期三</span>
                        <span class="timedata">2020-3-22</span>
                    </span>
                    <span class="week">
                        <span>星期三</span>
                        <span class="timedata">2020-3-22</span>
                    </span>
                     <span class="week">
                         <span>星期四</span>
                        <span class="timedata">2020-3-23</span>
                     </span>
                     <span class="week">
                        <span>星期五</span>
                        <span class="timedata">2020-3-24</span>
                     </span>
                    <span class="week">
                        <span>星期六</span>
                        <span class="timedata">2020-3-25</span>
                    </span>
                    <span class="week">
                        <span>星期日</span>
                        <span class="timedata">2020-3-26</span>
                    </span> -->
                </li>
                <ul v-for="(item,index) in employees" :key="index" class="figure">
                    <!-- :style="absenceClass(i)" -->
                    <li v-for="(i,index) in item.week" :key="index" :style="absenceClass(i)"></li>
                </ul>
              </ul>
          </span>
      </Card>
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'; // 导入卡片
import { color } from 'echarts/core';


export default {
  components: {
    Card,
  },
  data() {
      return {
           employees: [
               {
                 name: '陈蕾',
                 time: '18:00-20:00',
                 week:[
                     {
                         time: '',
                     },
                     {
                         flex: 2,
                         time: '32:00',
                     },
                     {
                         flex: 3,
                         time: '32:00',
                     },
                     {
                         flex: 4,
                         time: '32:00',
                     },
                 ]
               },
               {
                 name: '素甜',
                 time: '18:00-20:00',
                 week:[
                     {
                         time: '',
                     },
                     {
                         flex: 2,
                         time: '',
                     },
                     {
                         flex: 3,
                         time: '',
                     },
                     {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                 ]
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00',
                 week:[
                     {
                         time: '',
                     },
                     {
                         flex: 2,
                         time: '',
                     },
                     {
                         flex: 3,
                         time: '',
                     },
                     {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                      {
                         flex: 4,
                         time: '32:00',
                     },
                 ]
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
               {
                 name: '陈蕾',
                 time: '18:00-20:00'
               },
           ],
           week: [
               {
                   time: '09-10',
                   timedata: '2020-05-30'
               },
               {    
                   time: '11-12',
                   timedata: '2020-05-31'
               },
               {
                   time: '13-14',
                   timedata: '2020-06-01'
               },
               {
                   time: '14-15',
                   timedata: '2020-06-02'
               },
               {
                   time: '15-16',
                   timedata: '2020-06-03'
               },
               {
                   time: '16-17',
                   timedata: '2020-06-04'
               },
               {
                   time: '17-18',
                   timedata: '2020-06-05'
               },
               {
                   time: '18-19',
                   timedata: '2020-06-05'
               },
               {
                   time: '19-20',
                   timedata: '2020-06-05'
               },
               {
                   time: '20-21',
                   timedata: '2020-06-05'
               },
               {
                   time: '21-22',
                   timedata: '2020-06-05'
               },
               {
                   time: '22-23',
                   timedata: '2020-06-05'
               },
               {
                   time: '23-24',
                   timedata: '2020-06-05'
               },
               {
                   time: '24-01',
                   timedata: '2020-06-05'
               },
               {
                   time: '01-02',
                   timedata: '2020-06-05'
               },
               {
                   time: '02-03',
                   timedata: '2020-06-05'
               },
               {
                   time: '03-04',
                   timedata: '2020-06-05'
               },
               {
                   time: '04-05',
                   timedata: '2020-06-05'
               },
               {
                   time: '05-06',
                   timedata: '2020-06-05'
               },
               {
                   time: '06-07',
                   timedata: '2020-06-05'
               },
               {
                   time: '07-08',
                   timedata: '2020-06-05'
               },
               {
                   time: '08-09',
                   timedata: '2020-06-05'
               },
           ]
      } 
  },
  methods: {
      //数据处理
      absenceClass (week) {
        //   console.log(week);
        let color = ['#FFFF00', '#CC3333', '#CC9966']
        let num = Math.floor(Math.random() * 3) + 1
          if (week.time != '') {
            return {
                marginTop: '20px',
                width: '238.82px',
                display: 'inline-block',
                height: '21px',
                backgroundColor: color[num],
                color: '#7eedc8',
                padding: '3px 10px',
                // borderRadius: '4px'
            }
          } else {
              return {
                marginTop: '20px',
                display: 'inline-block',
                width: '238.82px',
                height: '21px',
                backgroundColor: '#ffffff',
                color: '#7eedc8',
                padding: '3px 10px',
                borderRadius: '4px'
              }
          }
      },
      onChangelist () {
          
      },
       // 选中日期时的事件
      onPick(value, context) {
            console.log('onPick:', value, context);
      },
      onChange(value) {
            console.log('onChange:', value);
      },
  }
}
</script>

<style lang="less" scoped>
    .row {
        padding-bottom: 40px;
    }
    .figure {
        border-bottom: '1px solid #999' !important;
    }
    .namespan {
        display: inline-block;
        display: flex;
        .zonghe {
            flex: 1;
            border-right: 1px dashed #999;
            padding-left: 20px;
        }
        .zhouyi {
            flex: 7;
            
            .timedata {
                font-size: 14px;
                text-align: center;
            }
        }
    }
  .name {
      font-size: 18px;
      font-weight: 500;
  }
  .weektime {
      display: flex;
      .week {
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          flex: 1;
          border-right: 1px dashed #999;
        //   padding-left: 20px;
      }
  }

  .spanall {
      border: 1px solid #999;
  }
  
  .namespans {
      border-bottom: 1px dashed #999;
      font-style: 16px;
      margin-top: 20px;
      .thename {
          margin-right: 10px;
      }
  }
</style>